<template>
	<view class="ColumnItem">
		<view class="scroll">
			<view class="item" :class="{ 'actived': i == index }" v-for="(item, i) in list" :key="item.id"
				@click="changeColumn(item, i)" :style="{ 'background-color': i == index ? activedBgcolor : '#333333' }">
				{{ item.name }}
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		getCurrentInstance
	} from 'vue';
	const emit = defineEmits(['accept'])

	const {
		proxy
	} = getCurrentInstance()


	defineProps({
		//数据列表
		list: {
			type: Array,
			default () {
				return []
			}
		},

		//下标
		index: {
			type: Number,
			default: 0
		},

		//当前选中item的bgColor
		activedBgcolor: {
			type: String,
			default: '#ffcb30'
		}
	})

	const changeColumn = (item, i) => {
		if (proxy.index == i) return
		emit('accept', {
			data: item,
			index: i
		})
	}
</script>

<style lang="scss" scoped>
	.ColumnItem {
		display: flex;
		flex-direction: row;
		width: 100%;
		height: 60rpx;
		margin-bottom: 4rpx;
		overflow: hidden;
		overflow-x: scroll;

		// 滚动条整体部分
		&::-webkit-scrollbar {
			width: 100%;
			height: 4px;
			background: #191919;
		}

		// 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
		&::-webkit-scrollbar-thumb {
			/*滚动条里面小方块*/
			background: #191919;
			border-radius: 4px;
			height: 4px;
		}

		// 滚动条的轨道（里面装有Thumb）
		&::-webkit-scrollbar-track {
			/*滚动条里面轨道*/
			background: #191919;
		}

		.scroll {
			white-space: nowrap;

			.item {
				height: 48rpx;
				padding: 0 28rpx;
				font-size: 24rpx;
				color: #999;
				border-radius: 20rpx;
				margin-right: 14rpx;
				display: inline-block;
				line-height: 48rpx;

				&.actived {
					color: #000
				}
			}
		}
	}
</style>